<template>
  <div class="custom-bg" :style="bgStyle">
    <div class="operate-btn">
      <svg-icon name="back" class="back" @click="backToHome" />
      <svg-icon v-if="showEdit" name="edit" class="edit" @click="toEdit" />
    </div>
  </div>
</template>

<script setup lang="ts" name="HeaderNav">
import { computed } from "vue";
import { useRouter } from "vue-router";

const props = defineProps({
  bgStyle: {
    type: Object,
    default: () => {}
  },
  showEdit: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["edit"]);
const router = useRouter();
const bgStyle = computed(() => props.bgStyle);

function backToHome() {
  router.back();
}

function toEdit() {
  emits("edit");
}
</script>

<style scoped lang="less">
.custom-bg {
  width: 100%;
  height: 12rem;

  .operate-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;

    .back {
      width: 2rem;
      height: 2rem;
    }
  }
}
</style>
